<template>
	<view style="padding-bottom: 130rpx;">
		<view class="formContainer">
			<uni-forms ref="form">
				<uni-forms-item label="借调同行" required>
					<view @click="choosePeer">
						<u--input v-model="formData.sameJobName" placeholder="请选择借调同行" disabled disabledColor="#fff"
							suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="车牌号" required>
					<view @click.stop="chooseCar">
						<u--input v-model="formData.carNo" placeholder="请选择车辆" disabled disabledColor="#fff"
							suffixIcon="arrow-right">></u--input>
					</view>
				</uni-forms-item>


				<uni-forms-item label="借调开始时间" required label-width="100">
					<uni-datetime-picker type="datetime" v-model="formData.startTime" placeholder="请选择借调开始时间" />
				</uni-forms-item>

				<uni-forms-item label="借调结束时间" label-width="100">
					<uni-datetime-picker type="datetime" v-model="formData.estimateEndTime"  placeholder="请选择借调结束时间" />
				</uni-forms-item>

				<uni-forms-item label="借调天数">
					<view>
						<u--input v-model="estimateDay" placeholder="根据借调时间计算" disabled disabledColor="#fff"></u--input>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="借调费用">
					<view>
						<u--input v-model="formData.totalRent" @input="check" type="digit"
							placeholder="请输入借调费用"></u--input>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="托管费用" v-if="formData.carSource==6">
					<view>
						<u--input v-model="formData.hostingFees" @input="check1" type="digit"
							placeholder="请输入托管费用"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="结算方式" required>
					<view @click="showSettlementType = true">
						<u--input v-model="formData.settlementTypeStr" placeholder="请选择结算方式" disabled
							disabledColor="#fff" suffixIcon="arrow-right"></u--input>
					</view>
				</uni-forms-item>

				<uni-forms-item label="车辆初始化照片" labelPosition="top" labelWidth="300">
					<sr-upload ref="upload" maxCount="20" @uploadResult="uploadCar"></sr-upload>
				</uni-forms-item>

				<uni-forms-item label="备注" labelPosition="top">
					<view>
						<u--textarea v-model="formData.remark" placeholder="请输入200字以内的内容" count maxlength="200">
						</u--textarea>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>

		<button type="info" class="sub-btn" @click="confimCar">确认</button>

		<!-- 车牌号键盘 -->
		<u-keyboard ref="uKeyboard" mode="car" :show="showCarKeyboard" @change="keyboardChange" @backspace="backspace"
			@cancel="showCarKeyboard=false" @confirm="showCarKeyboard=false"></u-keyboard>
		<!-- 借调同行 -->
		<u-picker :show="showPeer" :columns="list1" keyName="name" closeOnClickOverlay @close="showPeer = false"
			@cancel="showPeer = false" title="请选择借入同行" confirmColor="#1573FF" @confirm="confimPeer"></u-picker>
		<!-- 结算方式 -->
		<u-picker :show="showSettlementType" :columns="list2" keyName="name" closeOnClickOverlay
			@close="showSettlementType = false" @cancel="showSettlementType = false" title="请选择结算方式"
			confirmColor="#1573FF" @confirm="confimSettlementType"></u-picker>
	</view>
</template>

<script>
	import * as secondedApi from '@/api/seconded-api.js';
	import srUpload from '@/components/upload/sr-upload.vue'
	var moment = require('@/utils/moment.js');
	import settings from '@/settings.js'
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				type: 0,
				showCarKeyboard: false,
				showPeer: false,
				showSettlementType: false,
				id: '',
				formData: {
					sameJobName: '',
					sameJobId: '',
					carNo: '',
					carId: '',
					secondedType: 2,
					startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
					estimateEndTime: '',
					estimateDay: '',
					totalRent: '',
					remark: '',
					settlementWay: 1,
					settlementTypeStr: '借调结束结算',
					initialPicture: [],
					carSource: null,
					hostingFees:null
				},
				list1: [],
				list2: [
					[{
							name: '借调结束结算',
							id: 1
						},
						{
							name: '月末结算',
							id: 2
						}
					]
				]
			};
		},
		computed: {
			estimateDay() {
				let resultDay = '';
				if (!uni.$u.test.isEmpty(this.formData.startTime) && !uni.$u.test.isEmpty(this.formData.estimateEndTime)) {
					let m1 = moment(this.formData.startTime);
					let m2 = moment(this.formData.estimateEndTime);
					const diff = moment(m2).diff(moment(m1), 'seconds');
					//结束时间大于开始喀什
					if (diff > 0) {
						const diffHours = moment(m2).diff(moment(m1), 'hours');
						const day = Math.ceil(diffHours / 24);
						resultDay = day;
					} else {
						this.formData.estimateEndTime = '';
						uni.$u.toast('结束时间必须大于开始时间请重新选择');
					}
				} else {

				}
				return resultDay;

			}
		},
		onLoad(op) {

			if (op) {
				this.type = op.type;
				uni.setNavigationBarTitle({
					title: this.type == 1 ? '编辑借出车辆' : '借出车辆'
				})
			}

			if (this.type == 1) {
				this.id = op.id;
				this.getSecondedDetail();
			}

			this.getSecondedList();
			uni.$on('secondedCar', (car) => {
				this.formData.carId = car.id;
				this.formData.carNo = car.carNo;
				this.formData.carSource = car.carSource;
			})
		},
		methods: {
			choosePeer() {
				if (this.type == 0) {
					this.showPeer = true;
				} else {
					uni.$u.toast('同行信息不可编辑')
				}
			},

			getSecondedDetail() {
				secondedApi.secondedDetail(this.id).then(res => {
					this.formData = res.data;
					switch (this.formData.settlementWay) {
						case 1:
							this.formData.settlementTypeStr = '借调结束结算';
							break;
						case 2:
							this.formData.settlementTypeStr = '月末结算';
							break;
						case 3:
							this.formData.settlementTypeStr = '借调前结算';
							break;
						default:
							break;
					}

					if (!this.$u.test.isEmpty(this.formData.initialPicture)) {
						this.$refs.upload.fileList = this.formData.initialPicture.map(item => {
							return {
								message: '',
								status: 'success',
								thumb: settings.baseImageUrl + item,
								type: 'image',
								url: item
							}

						})
					}
				});
			},
			getSecondedList() {
				var param = {
					pageNum: 1,
					pageSize: 1000,
				};
				secondedApi.peerList(this.toParams(param)).then(res => {
					this.list1 = [res.rows];
				}).catch(error => {

				})
			},
			check(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.formData.totalRent = e;
				})
			},
			check1(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.formData.hostingFees = e;
				})
			},
			// 租赁时间发生改变
			timeChange(e) {
				if (e.length == 1) {
					this.$u.toast('请选择结束时间');
					return
				}
				this.formData.startTime = e[0];
				this.formData.estimateEndTime = e[1];
			},
			// 选择同行
			confimPeer(e) {
				this.formData.sameJobId = e.value[0].id;
				this.formData.sameJobName = e.value[0].name;
				this.showPeer = false;
			},
			// 选择车辆
			chooseCar() {
				if (this.type == 0) {
					uni.navigateTo({
						url: './secondedCarList'
					})
				} else {
					uni.$u.toast('车辆信息不可编辑')
				}

			},
			// 选择结算方式
			confimSettlementType(e) {
				this.formData.settlementWay = e.value[0].id;
				this.formData.settlementTypeStr = e.value[0].name;
				this.showSettlementType = false;
			},
			// 上传车辆初始化图片
			uploadCar(data) {
				this.formData.initialPicture = data;
			},
			// 确认
			confimCar() {

				if (uni.$u.test.isEmpty(this.formData.sameJobId)) {
					uni.$u.toast('请选择借调同行');
					return
				} else if (uni.$u.test.isEmpty(this.formData.carNo)) {
					uni.$u.toast('请输入车牌号');
					return
				} else if (uni.$u.test.isEmpty(this.formData.startTime)) {
					uni.$u.toast('借调开始时间不能为空,请选择');
					return
				} else if (uni.$u.test.isEmpty(this.formData.settlementWay)) {
					uni.$u.toast('请选择结算方式');
					return
				} else {
					if(!this.$u.test.isEmpty(this.formData.startTime)){
						this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')
					}
					if(!this.$u.test.isEmpty(this.formData.estimateEndTime)){
						this.formData.estimateEndTime = moment(this.formData.estimateEndTime).format('YYYY-MM-DD HH:mm:ss')
					}
					
					this.formData.estimateDay = this.estimateDay;
					if (this.type == 1) { //编辑
						secondedApi.editSeconded(this.formData).then(res => {
							uni.$emit("refreshSecondedList");
							this.$u.toast('修改成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					} else { //新增
						secondedApi.addSeconded(this.formData).then(res => {
							uni.$emit("refreshSecondedList");
							this.$u.toast('借调成功')
							uni.navigateBack({
								animationDuration: 300,
								delta: 1
							})
						})
					}
				}


			}
		}
	};
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>